<template>
  <div class="card-edit-left left-page-list scroll-bar-cls">
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item name="collapse-1">
        <template #title>
          页面
          <i class="jy-icon-plus right" @click.stop="click2AddPage"></i>
        </template>

        <div class="page-list-con" :style="{height: collapseHei + 'px'}">
          <ul class="page-list-scroll">
            <template :key="index" v-for="(item, index) in pages">
              <li class="page-list" @click.stop="onPageItem(index)">
                <div class="page-con">
                  <div class="page-number" :class="{'page-active': curPage == index}"><span>{{index + 1}}</span></div>
                  <div class="page-thumbnail" :class="{'page-active': curPage == index}">
                    <CardPhoneView :cardLists="pages[index]" :scale="0.33"></CardPhoneView>
                  </div>
                  <div class="page-btns-con">
                    <div v-if="curPage == index" class="page-btns">
                      <!-- <i class="jy-icon-copy" @click.stop="click2CopyPage"></i> -->
                      <!-- <i class="el-icon-tickets" @click.stop="onSaveTemplate"></i> -->
                      <i class="jy-icon-delete" @click.stop="click2DeletePage(index)"></i>
                      <!-- <i class="el-icon-top" @click.stop="click2TopPage(index)"></i> -->
                    </div>
                  </div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </el-collapse-item>

      <el-collapse-item name="collapse-2">
        <template #title>
          弹层
          <i class="jy-icon-plus right" @click.stop="click2AddPanel"></i>
        </template>

        <div class="page-list-con" :style="{height: collapseHei + 'px'}">
          <ul class="page-list-scroll">
            <template :key="index" v-for="(item, index) in panels">
              <li class="page-list" @click.stop="onPanelItem(index)">
                <div class="page-con">
                  <div class="page-number" :class="{'page-active': curPanel == index}"><span>{{index + 1}}</span></div>
                  <div class="page-thumbnail" :class="{'page-active': curPanel == index}">
                    <PanelView :list="panels[index]" :scale="0.33"></PanelView>
                  </div>
                  <div class="page-btns-con">
                    <div v-if="curPanel == index" class="page-btns">
                      <i class="jy-icon-delete" @click.stop="click2DeletePanel(index)"></i>
                    </div>
                  </div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import CardPhoneView from '@/views/card/content/CardPhoneView.vue';
  import PanelView from '@/views/card/panel/PanelView.vue';

  import { useWebCardCompStore } from "@/store/web/card-component";
  import { useWebPanelCompStore } from "@/store/web/panel-component";
  const useWebCardComp = useWebCardCompStore();
  const useWebPanelComp = useWebPanelCompStore();

  export default {
    data() {
      return {
        activeNames: ['collapse-1'],  // collapse-1 / collapse-2
        collapseHei: 0,
      }
    },
    computed: {
      pages: state => _.cloneDeep(useWebCardComp.siteData.pages),
      curPage: state => useWebCardComp.curPage,
      panels: state => _.cloneDeep(useWebCardComp.siteData.panels) || [],
      curPanel: state => useWebPanelComp.curPanel,
    },
    components: {
      CardPhoneView,
      PanelView
    },
    created() {
      let win_Height = window.innerHeight || Math.max(document.body.clientHeight, document.documentElement.clientHeight);
      this.collapseHei = win_Height - 60 - 56;  // index-header + el-collapse-head*2 + right-timelime
    },
    methods: {
      /* curPage 索引 */
      onPageItem(index) {
        // 1. 更新 curPage
        useWebCardComp.updateCurPage(index);
      },

      /* page 增/删/拷贝 */
      click2AddPage() {
        // 1. 更新 数据
        const pagesLen = this.pages.length;
        useWebCardComp.handler4AddPage();

        // 2. 更新 curPage
        useWebCardComp.updateCurPage(pagesLen);
      },

      /* page control: copy/delete/top/bottom/up/down */
      click2CopyPage() {},
      click2DeletePage(index) {  /* delate page */
        this.$confirm('是否继续删除该页面?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            // 1. 更新 pages
            const newPages = _.cloneDeep(this.pages);
            newPages.splice(index, 1);
            if( newPages.length <= 0 ) newPages.push([]);
            useWebCardComp.updatePages(newPages);

            // 2. 更新 curPage
            const newCurPage = index - 1 < 0 ? 0 : index - 1;
            useWebCardComp.updateCurPage(newCurPage);
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          })
      },
      click2TopPage() {},

      /* curPanel 索引 */
      onPanelItem(index) {
        // 1. 更新 curPanel
        if(index == this.curPanel) useWebPanelComp.updateCurPanel(-1);
        else useWebPanelComp.updateCurPanel(index);

        // 2. 取消 panel_item 选择
        useWebPanelComp.updateCurTarget({
          itemId: '',
          parentId: '',
        });
      },

      /* panel 增/删/拷贝 */
      click2AddPanel() {
        // 1. 更新数据
        const panelsLen = this.panels.length;
        useWebCardComp.handler4AddPanel();
      },

      /* panel control: copy/delete/top/bottom/up/down */
      click2CopyPanel() {},
      click2DeletePanel(index) {  /* delate page */
        this.$confirm('是否继续删除该弹层?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            // 1. 更新 pages
            const newPanels = _.cloneDeep(this.panels);
            newPanels.splice(index, 1);
            useWebCardComp.updatePanels(newPanels);

            // 2. 更新 curPage
            useWebPanelComp.updateCurPanel(-1);
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          })
      },
      click2TopPanel() {},
    },
  }
</script>

<style lang="scss">
  @import '@/assets/scss/edit.scss';

  .card-edit-left {
    position: relative;
    // display: none;
    left: 0;
    top: 60px;
    width: 200px;
    min-width: 200px;
    height: calc(100% - 60px);
    background: #fff;
    z-index: 1;
    overflow: auto;
  }

  .card-page {
    position: relative;
    width: 128px;
    height: 195px;
  }

  .page-list-con {
    position: relative;

    .page-list-scroll {
      position: relative !important;

      .page-list {
        width: 100% !important;
        height: 215px;
        margin: 10px auto;

        // border-radius: 2px;
        // box-shadow: 0 4px 4px 0 rgba(18, 123, 255, 0.1);
        // border: 4px solid transparent;

        .page-btns-con {
          display: none;
        }
        .page-con:hover {
          .page-btns-con {
            display: block;
          }
        }
      }

      .page-thumbnail {
        position: relative;
        width: 128px;
        height: 195px;
        overflow: hidden;
      }
      .page-thumbnail::before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
      }
    }
  }
</style>
